<template>
  <div id="vantList">
    <div class="main" style="background: #eee;" v-if="!detailShow">
      <div class="container">
        <van-list v-model="loading1" :finished="true" finished-text="没有更多了" class="toBeCheckedList-middle1">
          <van-cell v-for="(item, index) in OptionListData" :key="index" @click="handleAdd(item)">
            <ul class="toBeCheckedList-middle">
              <li class="toBeCheckedList-middle2">
                户主姓名：{{ item.propertyPerson }}
              </li>
              <li class="toBeCheckedList-middle4">核查结论：{{ item.inspectResult }}
              </li>
              <li class="toBeCheckedList-middle4">
                自建房排查编号：{{ item.checkNumber }}
              </li>
              <li class="toBeCheckedList-middle4">
                房屋用途：{{ item.houseUsage }}

              </li>
              <li class="toBeCheckedList-middle4">
                数据来源：{{ item.dataSource }}
              </li>
              <li class="toBeCheckedList-middle4">
                巡查时间：{{ item.patrolDate }}
              </li>
              <li class="toBeCheckedList-middle4">
                核查人：{{ item.inspectPerson }}

              </li>
              <li class="toBeCheckedList-middle4">
             核查时间：{{ item.inspectDate }}
              </li>
              <li class="toBeCheckedList-middle4">
                地址：{{ item.detailAddress }}<img @click.stop="showGeo(item)" style="margin-right: 4px" width="10"
                  src="https://nfzjszlb.jst.zj.gov.cn/serverfile/zheliban/icon/YPC/dingwei.png" />
              </li>
            </ul>
          </van-cell>
        </van-list>
      </div>
      <p style="margin-top:10px;text-align: center;padding: 0 10px;">
        <van-button size="small" block type="info" @click="backHomepage()">返回 </van-button>
      </p>
    </div>
    <div class="main" v-else>
      <div class="container">
        <div class="tab">
          <ul>
            <li v-for="(item, index) in tabArr" :class="{ select: nowIndex === index }" :key="index"
              @click="tabClick(index)">
              <p>{{ item }}</p>
              <span v-if="nowIndex === index"
                style="width: 64px; height: 6px; background: #007aff; border-radius: 3px; display: inline-block">
              </span>
            </li>
          </ul>
        </div>
        <div class="content" v-show="nowIndex == 0">
          <patrol-information :objectNo="row.objectNo" v-if="row.objectNo" :disabled="true"></patrol-information>
        </div>
        <div class="content" v-show="nowIndex == 1">
          <house-safety-checklist ref="houseSafety" v-if="row.objectNo" :rowData="row" :objectNo="row.objectNo"
            :disabled="disabled">
          </house-safety-checklist>
        </div>
      </div>
      <p style="margin-top:10px;text-align: center;padding: 0 10px;">
        <van-button size="small" block type="info" @click="detailShow = false">返回 </van-button>
      </p>
    </div>
  </div>
</template>
<script>
import dd from 'gdt-jsapi'
import axios from 'axios'
import { housePublichouseRemoldUnitBuildinspectList } from '../../../utils/api'
import patrolInformation from "./formPanel/patrolInformation";
import houseSafetyChecklist from "./formPanel/houseSafetyChecklist";
export default {
  data() {
    return {
      BaseURL: window.g.BaseURL + '/api/farmerHouse',
      loading1: false,
      detailShow: false,
      row: {},
      tabArr: ['排查信息', '镇街排查'],
      nowIndex: 1,
      form: {
        propertyPerson: ""
      },
      cityCode: window.localStorage.getItem('citycode').replace(/(0+)$/g, ""),
      OptionListData: [],
    }
  },
  props: ['checkNumber', 'id'],
  components: {
    patrolInformation,
    houseSafetyChecklist
  },
  methods: {
    async getData1() {
      let _this = this
      let parm = {
        pageNo: 1,
        pageSize: 10000,
        checkNumberFull: this.checkNumber,
        notInId: this.id,
        patrolProcessNode: 2
      }
      let webResult = await housePublichouseRemoldUnitBuildinspectList(parm)
      _this.loading1 = false
      let pageList = webResult.data.data.pageList
      if (pageList.length > 0) {
        this.OptionListData = pageList
      }
    },
    tabClick(index) {
      this.nowIndex = index
    },
    showGeo: async function (item) {
      let webResult = await axios.get(this.BaseURL + '/tfwZjf/getZjfGeomP?yhfwbh=' + item.checkNumber, {
        headers: {
          isOutParam: true,
        },
      });
      if (webResult.data.data && webResult.data.data.length > 0) {
        let dataValue = [{ "geomP": webResult.data.data[0] }]
        var url = window.g.oneMapUrlLocation + "?user=" + window.localStorage.getItem("citycode") + "&data=" + encodeURIComponent(JSON.stringify(dataValue))
        window.open(url)
      } else {
        this.$toast.fail("坐标不能为空!")
      }

    },
    handleAdd(row) {
      this.row = row;
      this.detailShow = true
    },
    backHomepage() {
      this.$emit('close', true)
    }
  },
  created() { },
  mounted() {
    // dd.ready(function () {
    //   dd.setTitle({
    //     title: '安全核查',
    //   })
    //     .then((res) => { })
    //     .catch((err) => {
    //       console.error(err)
    //     })
    // })
    this.getData1()
  },
}
</script>
<style lang="scss" scoped >
#vantList {
  height: 100%;
  width: 100%;
  height: 100vh;

  .main {
    width: 100%;
    height: 100%;
  }

  .container {
    width: 100%;
    height: calc(100% - 60px);
    overflow: auto;
  }

  .tab ul li {
    width: 50%;
    height: 50px;
    background: #fff;
    float: left;
    /*line-height: 50px;*/
    text-align: center;
    color: #000;
    padding-top: 10px;
  }

  .content {
    width: 100%;
    height: calc(100% - 50px);
    overflow-y: auto;
  }

  .footer {
    width: 100%;
    padding: 20px;
    text-align: center;
  }

  .select {
    color: #007aff !important;
  }

  .toBeCheckedList-middle1 {
    height: 100%;
    // overflow: auto;
    overflow-y: auto;

    .toBeCheckedList-middle {
      background-color: #fff;
      border-radius: 10px;
      padding: 8px 10px;
      width: 98%;
      margin: 0 auto;

      .toBeCheckedList-middle2 {
        font-size: 18px;
        font-weight: 1000;
        color: black;
        line-height: 36px;
      }

      .toBeCheckedList-middle3 {
        font-size: 14px;
        color: #aaa;
        line-height: 24px;

        span {
          float: right;
          // padding-left: 4vw;
        }
      }

      .toBeCheckedList-middle4 {
        font-size: 14px;
        color: #aaa;
        line-height: 24px;

        span {
          float: right;
          // padding-left: 4vw;
        }
      }
    }
  }
}
</style>
<style>
#vantList .van-tab {
  font-size: 18px;
}
</style>
